<template>
	<view>
		<view class="top-box">
			<view style="color: #18326E;margin-bottom: 20rpx;">{{title}}</view>
			<view style="color: #96A0B1;font-size: 24rpx;">请选择操作类型(Operation)和参数(Parameter)，然后点击查询按钮</view>
		</view>
		<view class="fc cen1">
			<view class="cen-box2" style="border-right: 1rpx solid #CEDDF7;">操作</view>
			<view class="cen-box2">参数</view>
		</view>
		<view class="cen2 fc">
			<view class="cen2-box" style="border-right: 1rpx solid #CEDDF7;">
				<vvSelect barWidth="375" barHeight="430" :showBar="false" :list="datalist" @change="chgGood"></vvSelect>
			</view>
			<view class="cen2-box">
				<vvSelect barWidth="375" barHeight="430" :showBar="false" :list="datalist1" @change="chgBad"></vvSelect>
			</view>
		</view>
		<view class="fixed-box">
			<view class="bottom-btn" @click="goNext">查询</view>
		</view>
	</view>
</template>

<script>
	import vvSelect from '@/components/vv-select/vv-select'
	export default {
		components: {
			vvSelect
		},
		data() {
			return {
				mode: 1,
				title:'',
				datalist:[],
				datalist1:[],
				goodNum: 0,
				badNum: 0,
			}
		},
		onLoad(opt) {
			this.mode = opt.mode
			this.setTitle()
			this.goodList()
			this.badList()
		},
		methods: {
			goodList(){
				this.$u.api.ScientList({
					lb: 1,
					mode: this.mode
				}).then(data=>{
					data.forEach(item=>{
						item.show = false
					})
					this.datalist = data
				})
			},
			badList(){
				this.$u.api.ScientList({
					lb: 2,
					mode: this.mode
				}).then(data=>{
					data.forEach(item=>{
						item.show = false
					})
					this.datalist1 = data
				})
			},
			chgGood(e){
				this.goodNum = e
			},
			chgBad(e){
				this.badNum = e
			},
			setTitle() {
				if(this.mode == 1){
					this.title = '功能查询'
				}else if(this.mode == 2){
					this.title = '参数查询'
				}else{
					this.title = '转换查询'
				}
				uni.setNavigationBarTitle({
					title: this.title
				});
			},
			goNext(){
				uni.navigateTo({
					url:'/pagesShop/science/query?aid=' + this.datalist[this.goodNum].id + '&bid=' + this.datalist1[this.badNum].id
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F2F2F6;
	}
	.top-box{
		width: 750rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	/*  */
	.cen1{
		border-bottom: 1rpx solid #CEDDF7;
	}
	.cen-box2{
		padding: 30rpx 0;
		width: 50%;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #133267;
	}
	.cen2{
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #CEDDF7;
	}
	.cen2-box{
		width: 50%;
	}
	.fixed-box{
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 110rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bottom-btn{
		width: 690rpx;
		height: 78rpx;
		background-color: #18326E;
		color: #FFFFFF;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
</style>
